<template>
    <div class="pageContainer">
        <div class="searchWarp">
            <template v-for="condition in listCondition">
                <CCondition :condition="condition"></CCondition>
            </template>
            <div class="schLine">
                <CBtn @click="search(1)">查询</CBtn>
            </div>
        </div>
        <div class="treeTable">
            <div style="flex:1;">
                <div class="btnWarp">
                    <CBtn @click="showEdit">新增</CBtn>
                    <CBtn @click="doBatchDel()">批量删除</CBtn>
                </div>
                <CPageTable :data="tableData" :curPage="paging.curPage" :total="paging.total" 
                    @changeSelect="changeSelect"
                    @changeSize="changeSize"
                    @changePage="search">
                    <template slot-scope="scope">
                        <CBtn type="text" @click="doDel(scope.row)">删除</CBtn>
                    </template>

                </CPageTable>
            </div>
        </div>

        <CDailog title="新增/编辑" :isShow="isShowEdit" @close="isShowEdit = false">
            <div style="width:100%;min-height:35vh;">
                <div style="width:90%;margin-left:5%;">
                    <el-steps :active="step">
                        <el-step title="公司信息" description="设置公司的基本信息"></el-step>
                        <el-step title="角色权限" description="设置管理员帐户的角色权限"></el-step>
                        <el-step title="管理员信息" description="设置管理员的信息"></el-step>
                    </el-steps>
                </div>
                <div style="width:90%;margin-left:5%;" v-show="step == 1">
                    <el-form :inline="true">
                        <CText form v-model="mm.code" title="编码" field="code"></CText>
                        <CText form v-model="mm.name" title="名称" field="name"></CText>
                        <CText form v-model="mm.tel" title="负责人电话" field="tel"></CText>
                        <CText form v-model="mm.lng" title="经度" field="lng"></CText>
                        <CText form v-model="mm.lat" title="纬度" field="lat"></CText>
                        <CText form v-model="mm.address" title="地址" field="address"></CText>
                    </el-form>
                </div>
                <div style="width:90%;margin-left:5%;" v-show="step == 2">
                    <div style="width:50%;margin-top:30px;">
                        <el-tree ref="menuTree" :data="treeData" show-checkbox node-key="id" :default-expanded-keys="[]" :default-checked-keys="checkedIds"
                            :props="treeProps">
                        </el-tree>
                    </div>
                </div>
                <div style="width:90%;margin-left:5%;" v-show="step == 3">
                    <el-form :inline="true">
                        <CText form v-model="admin.account" title="帐号" field="account"></CText>
                        <CText form v-model="admin.nickName" title="呢称" field="nickName"></CText>
                        <CText form v-model="admin.pwd" title="密码" field="pwd"></CText>
                        <CText form v-model="admin.realName" title="真实姓名" field="realName"></CText>
                        <CText form v-model="admin.mobile" title="手机号" field="mobile"></CText>
                        <CSelect form v-model="admin.val" title="性别" field="sex" opType="sex"></CSelect>
                    </el-form>
                </div>
                
            </div>
            <div slot="footer" style="width:100%;text-align:right">
                <el-button @click="isShowEdit = false">取 消</el-button>
                <el-button @click="doPre()">上一步</el-button>
                <el-button type="primary" @click="doNext()">
                    <span v-if="step < 3">下一步</span>
                    <span v-else>保存</span>
                </el-button>
            </div>
        </CDailog>
    </div>
</template>

<script>
import pagingMixin from '@/mixin/pagingMixin'
export default {
    mixins: [pagingMixin],
    data() {
        return {
            treeProps: {
                children: 'listChild',
                label: 'label'
            },
            checkedIds: [],
            treeData: [],
            step: 1,
            admin: {},
            model: "ums",
            table: "UmsOrg",
            isShowVote: false,
            curRoleId: ""
        }
    },
    created() {
        this.templateId = "d071f849-6754-492a-b07c-26c772d3dd65";

        //取得查询条件
        this.$sys.getPageConditions({ id: this.templateId }).then(res => {
            this.listCondition = res.data;
        })
        //查询表格数据
        this.search(1);
    },
    methods: {
        doNext() {
            if (this.step < 3) {
                this.step++;
            } else {
                //保存
                this.doSave();
            }
            
        },
        doPre() {
            if (this.step > 1) {
                this.step = this.step - 1;
            }
        },
        showEdit() {
            this.isShowEdit = true;
            this.step = 1;
            this.$ums.getAllMenu({}).then(res => {
                this.treeData = res.data.tree;
                this.checkedIds = res.data.ownIds;
            })
        },
        doSave() {
            let checkedNodes = this.$refs.menuTree.getCheckedNodes(false, true);

            let ids = checkedNodes.filter(item => {
                if (item.listChild && item.listChild.length > 0) {
                    return false;
                } else {
                    return true;
                }
            }).map(item => item.id);

            this.$ums.saveBusiness({
                mm: this.mm,
                admin: this.admin,
                listPermissionIds: ids
            
            }).then(res => {
                this.isShowEdit = false;
                this.$message.success("保存成功");
                this.search();
            })
        }

    }
}
</script>

<style lang="scss" scoped></style>